import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Row, Popconfirm, Button, Col, Checkbox, Icon, Upload, Divider, Form, Radio } from 'antd';
import styles from '../index.less'

const CheckboxGroup = Checkbox.Group;

@connect(({ paper }) => ({

}))
class PageItem extends PureComponent {

  constructor(...args) {
    super(...args);
    const { question } = this.props;
    this.state = {
      type: question.type,
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;

  }

  handleEdit = () => {
    this.props.showConponent();
  }

  handleDelete = () => {
    const { dispatch, question } = this.props;
    dispatch({
      type: 'paper/deleteExamQuestion',
      payload:{
        ...question
      }
    })
  }

  render() {
    const { question } = this.props;
    const { type } = this.state;
    // console.log(question);

    const muckItem = {};
    const muckOption = ["11", "222222222222222", "3333333333333", "44444444444444444"];

    const questionOptions = muckOption.map((item, index) => (
      <Row key={index}>
        <Col span={24} offset={4} >
          <Checkbox className={styles.questionOption} value={item} key={item}>{item}</Checkbox>
        </Col>
      </Row>
    ))

    return (
      <div>
        {(() => {
          switch (type) {
            case 1: return <div>
              <Card bordered={false} style={{ backgroundColor: `#fefcf7` }}>
                <Row>
                  <Col xs={12} md={21} offset={1}>
                    <span className={styles.questionSort}>1.</span>
                    <span className={styles.questionTitle}></span>
                    <div style={{ marginTop: 5 }}>
                      <CheckboxGroup >
                        {questionOptions}
                      </CheckboxGroup>
                    </div>
                  </Col>
                  <Col md={1} offset={1}>
                    <Icon type="edit" onClick={this.handleEdit} style={{ fontSize: 25, margin: 10, display: `block` }} />
                    <Icon type="delete" onClick={this.handleDelete} style={{ fontSize: 25, margin: 10, display: `block` }} />
                  </Col>
                </Row>
              </Card>
              <Card bordered={false} style={{ backgroundColor: `#EEEEEE` }}>
                <span>试题解析:</span>
              </Card>
            </div>; break;
            case 2: return <span>test</span>; break;
            case 3: return <span>test</span>; break;
            case 4: return <span>test</span>; break;
            case 5: return <div>
              <Card bordered={false} style={{ backgroundColor: `#fefcf7` }}>
                <Row>
                  <Col xs={12} md={21} offset={1}>
                    <span className={styles.questionSort}></span>
                    <span className={styles.questionTitle}>{question.title}</span>
                    <span>（ 简答题 分值：{question.value} ）</span>
                    <div style={{ marginTop: 5 }}>
                      <span>答： {question.answer}</span>
                    </div>
                  </Col>
                  <Col md={1} offset={1}>
                    <Icon type="edit" onClick={this.handleEdit} style={{ fontSize: 25, margin: 10, display: `block` }} />
                    <Popconfirm title="Are you sure delete this question?" onConfirm={this.handleDelete}>
                      <Icon type="delete" style={{ fontSize: 25, margin: 10, display: `block` }} />
                    </Popconfirm>
                  </Col>
                </Row>
              </Card>
              {/* <Card bordered={false} style={{ backgroundColor: `#EEEEEE` }}>
                <span>试题解析:  </span>
                <span>{question.analysis}</span>
              </Card> */}
            </div>; break;
            default: break;
          }
        }
        )()}
      </div>
    )
  }
}
export default PageItem